import React, { Component } from 'react'
import { Text, StyleSheet, View, ScrollView } from 'react-native'

export default class AlignContent extends Component {
  render() {
    return (
      <View style={{width:'100%',height:'100%'}}>
        <Text style={[styles.h2]}>多行内容在交叉轴上的对齐方式</Text>
        <ScrollView>
          <Text style={[styles.h4]}>alignContent: 'flex-start' (默认)</Text>
          <View style={[styles.containerBase, styles.flexRow, styles.flexWrap, styles.alignContentStart]}>
            <Text style={[styles.itemBase]}>刘备</Text>
            <Text style={[styles.itemBase]}>关羽</Text>
            <Text style={[styles.itemBase]}>张飞</Text>
            <Text style={[styles.itemBase]}>曹操</Text>
            <Text style={[styles.itemBase]}>孙权</Text>
            <Text style={[styles.itemBase]}>周瑜</Text>
            <Text style={[styles.itemBase]}>诸葛亮</Text>
            <Text style={[styles.itemBase]}>司马懿</Text>
            <Text style={[styles.itemBase]}>许褚</Text>
          </View>

          <Text style={[styles.h4]}>alignContent: 'center'</Text>
          <View style={[styles.containerBase, styles.flexRow, styles.flexWrap, styles.alignContentCenter]}>
            <Text style={[styles.itemBase]}>刘备</Text>
            <Text style={[styles.itemBase]}>关羽</Text>
            <Text style={[styles.itemBase]}>张飞</Text>
            <Text style={[styles.itemBase]}>曹操</Text>
            <Text style={[styles.itemBase]}>孙权</Text>
            <Text style={[styles.itemBase]}>周瑜</Text>
            <Text style={[styles.itemBase]}>诸葛亮</Text>
            <Text style={[styles.itemBase]}>司马懿</Text>
            <Text style={[styles.itemBase]}>许褚</Text>
          </View>

          <Text style={[styles.h4]}>alignContent: 'flex-end'</Text>
          <View style={[styles.containerBase, styles.flexRow, styles.flexWrap, styles.alignContentEnd]}>
            <Text style={[styles.itemBase]}>刘备</Text>
            <Text style={[styles.itemBase]}>关羽</Text>
            <Text style={[styles.itemBase]}>张飞</Text>
            <Text style={[styles.itemBase]}>曹操</Text>
            <Text style={[styles.itemBase]}>孙权</Text>
            <Text style={[styles.itemBase]}>周瑜</Text>
            <Text style={[styles.itemBase]}>诸葛亮</Text>
            <Text style={[styles.itemBase]}>司马懿</Text>
            <Text style={[styles.itemBase]}>许褚</Text>
          </View>

          <Text style={[styles.h4]}>alignContent: 'stretch'</Text>
          <View style={[styles.containerBase, styles.flexRow, styles.flexWrap, styles.alignContentStretch]}>
            <Text style={[styles.itemBase, {height: 'auto'}]}>刘备</Text>
            <Text style={[styles.itemBase, {height: 'auto'}]}>关羽</Text>
            <Text style={[styles.itemBase, {height: 'auto'}]}>张飞</Text>
            <Text style={[styles.itemBase, {height: 'auto'}]}>曹操</Text>
            <Text style={[styles.itemBase, {height: 'auto'}]}>孙权</Text>
            <Text style={[styles.itemBase, {height: 'auto'}]}>周瑜</Text>
            <Text style={[styles.itemBase, {height: 'auto'}]}>诸葛亮</Text>
            <Text style={[styles.itemBase, {height: 'auto'}]}>司马懿</Text>
            <Text style={[styles.itemBase, {height: 'auto'}]}>许褚</Text>
          </View>

          <Text style={[styles.h4]}>alignContent: 'space-between'</Text>
          <View style={[styles.containerBase, styles.flexRow, styles.flexWrap, styles.alignContentBetween]}>
            <Text style={[styles.itemBase]}>刘备</Text>
            <Text style={[styles.itemBase]}>关羽</Text>
            <Text style={[styles.itemBase]}>张飞</Text>
            <Text style={[styles.itemBase]}>曹操</Text>
            <Text style={[styles.itemBase]}>孙权</Text>
            <Text style={[styles.itemBase]}>周瑜</Text>
            <Text style={[styles.itemBase]}>诸葛亮</Text>
            <Text style={[styles.itemBase]}>司马懿</Text>
            <Text style={[styles.itemBase]}>许褚</Text>
          </View>

          <Text style={[styles.h4]}>alignContent: 'space-around'</Text>
          <View style={[styles.containerBase, styles.flexRow, styles.flexWrap, styles.alignContentAround]}>
            <Text style={[styles.itemBase]}>刘备</Text>
            <Text style={[styles.itemBase]}>关羽</Text>
            <Text style={[styles.itemBase]}>张飞</Text>
            <Text style={[styles.itemBase]}>曹操</Text>
            <Text style={[styles.itemBase]}>孙权</Text>
            <Text style={[styles.itemBase]}>周瑜</Text>
            <Text style={[styles.itemBase]}>诸葛亮</Text>
            <Text style={[styles.itemBase]}>司马懿</Text>
            <Text style={[styles.itemBase]}>许褚</Text>
          </View>
        </ScrollView>
        
      </View>
    )
  }
}

const styles = StyleSheet.create({
  containerBase: {
    height: 150,
    margin: 10,
    borderWidth: 1,
    borderColor: 'grey'
  },
  itemBase: {
    height: 30,
    borderWidth: 1,
    borderColor: 'red',
    backgroundColor: '#dfb',
    padding: 4,
    textAlign: 'center',
    fontSize: 18,
  },
  h2: {
    margin: 10,
    fontSize: 30,
    fontWeight: 'bold'
  },
  h4: {
    marginHorizontal: 10,
    fontSize: 20
  },
  flexRow: {
    flexDirection: 'row'
  },
  flexRowReverse: {
    flexDirection: 'row-reverse'
  },
  flexColumn: {
    flexDirection: 'column'
  },
  flexColumnReverse: {
    flexDirection: 'column-reverse'
  },
  flexWrap: {
    flexWrap: 'wrap'
  },
  alignContentStart: {
    alignContent: 'flex-start'
  },
  alignContentCenter: {
    alignContent: 'center'
  },
  alignContentEnd: {
    alignContent: 'flex-end'
  },
  alignContentStretch: {
    alignContent: 'stretch'
  },
  alignContentBetween: {
    alignContent: 'space-between'
  },
  alignContentAround: {
    alignContent: 'space-around'
  },
})
